<template>
  <div class="user-admin">
    <div class="userAvatar">
      <img src="@/assets/UP.svg" class="avatar" alt="img" @mouseover="upMenu" />
    </div>
    <dd class="user-btn" @click="btnLogout">退出</dd>
  </div>
  <div class="select">
    <ul v-if="showMenu" class="select">
      <li @click="toUserInfo">个人信息</li>
      <li @click="toAdmin">我的音乐</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { logout } from "@/api/auth.js";
import { removeToken } from "@/utils/auth.js";
import { useUserStore } from "@/store/user.js";
import { useRouter } from "vue-router";
const userInfo = ref({
  userName: "test",
  userAvatar: "",
});
const person_info = () => {};
const userStore = useUserStore();
const router = useRouter();
const btnLogout = () => {
  //发请求
  logout().then((res) => {
    //删除cookie
    removeToken();
    //pinia中缓存
    userStore.removeAuth();
    userStore.clearUserInfo();
    router.push({
      path: "/login",
    });
  });
};
const showMenu = ref(false);
//管理菜单显示
const upMenu = () => {
  showMenu.value = true;
};
const downMenu = () => {
  showMenu.value = false;
};
const toUserInfo = () => {
  //跳转到个人信息页面
  downMenu();
  router.push("userInfo");
};
const toAdmin = () => {
  //跳转到管理音乐界面
  downMenu();
  router.push("userAdmin");
};
</script>
<style scoped lang="scss">
//todo
img {
  width: 120px;
  height: 50px;
}
.user-admin {
  display: flex;
  align-items: center;
}
.select {
  position: absolute;
  width: 80px;
  margin-left: 10px;
}
</style>
